<template>
  <div>
    <top-bar></top-bar>
    <left-bar :datas='data'></left-bar>
    <div class="adddrug system">
      <home-bar :currentPage='currentPage'></home-bar>
      <div class="adddrugs system-main">
        <div class="main-position">
          首页 > 药品管理 > 已过期药品
        </div>
        <div class="main-height"></div>
        <div class="main-mains">
          <div class="main-top-nav">
            <ul>
              <router-link to="/druglistai/druglist" @click.native="addPath('/druglistai/druglist','药品管理');">
                <li>药品列表</li>
              </router-link>
              <router-link to="/stockmanagement" @click.native="addPath('/stockmanagement','药品管理');">
                <li>进货管理</li>
              </router-link>
              <router-link to="/druglistai/deleteddrugs" @click.native="addPath('/druglistai/deleteddrugs','药品管理');">
                <li>已删除药品</li>
              </router-link>
              <router-link to="/druglistai/shangjia" @click.native="addPath('/druglistai/shangjia','药品管理');">
                <li>已上架</li>
              </router-link>
              <router-link to="/druglistai/xiajia" @click.native="addPath('/druglistai/xiajia','药品管理');">
                <li>已下架</li>
              </router-link>
              <router-link to="/druglistai/shortageofdrugs" @click.native="addPath('/druglistai/shortageofdrugs','药品管理');">
                <li>缺货药品</li>
              </router-link>
              <router-link to="/druglistai/lackdrug" @click.native="addPath('/druglistai/lackdrug','药品管理');">
                <li>库存预警</li>
              </router-link>
              <router-link to="/willexpire" @click.native="addPath('/willexpire','药品管理');">
                <li>即将过期药品</li>
              </router-link>
              <router-link to="/expired" @click.native="addPath('/expired','药品管理');">
                <li class="active">已过期药品</li>
              </router-link>
              <router-link to="/productcategorymgmt" @click.native="addPath('/productcategorymgmt','药品管理');">
                <li>产品种类管理</li>
              </router-link>
              <router-link to="/brandlibrary" @click.native="addPath('/brandlibrary','药品管理');">
                <li>品牌库</li>
              </router-link>
            </ul>
          </div>
          <div class="drugListMain">
            <div class="moreScreeningKeyword" v-show="moreScreeningKeyword">
              <li v-for="(screening,index) in moreScreeningKeywordList" :key="index">
                <span>{{screening.key}}：</span>
                <span>{{screening.value}}</span>
                <i class="el-icon-close" @click="deleteScreeningKeywordItem(index)"></i>
              </li>
            </div>
            <div class="headOperation">
              <a href="javascript:void(0);" class="OperationA" @click="clickPatchExport">批量导出</a>
              <a href="javascript:void(0);" class="OperationA" @click="clickScreeningPopup">筛选</a>
              <div class="drugListSearch">
                <el-input placeholder="请输入内容" suffix-icon="el-icon-search" v-model="input21">
                </el-input>
              </div>
              <a href="javascript:void(0);" class="OperationA-color" @click="clearScreeningConditions">清空筛选条件</a>
              <i class="iconDown iconfont icon-xiala" @click="moreScreeningKeyword = moreScreeningKeyword == false ? true : false" v-if="iconDownSwitch"></i>
              <div class="screeningKeyword">
                <span v-for="(screening,index) in moreScreeningKeywordList" :key="index">
                      {{screening.value.length > 6 ? screening.value.slice(0,6) + '...' : screening.value}}
                      <i class="el-icon-close" @click="deleteScreeningKeywordItem(index)"></i>
                    </span>
              </div>
            </div>
            <div class="drugListTable">
              <table>
                <tr>
                  <td>
                    <el-checkbox class="fl" v-model='cheackAllChecked' @change='checkAllFun'></el-checkbox>
                    序号
                  </td>
                  <td>批次号</td>
                  <td>图片</td>
                  <td>药品分类</td>
                  <td>药品编码</td>
                  <td>药品名称</td>
                  <td>品牌</td>
                  <td>处方/非处方</td>
                  <td>经营范围</td>
                  <td>库存</td>
                  <td>生产日期</td>
                  <td>保质期</td>
                  <td>保质期至</td>
                  <td>药品状态</td>
                </tr>
                <tr v-for="(trading,index) in tableList" :key="index">
                  <td width="100">
                    <el-checkbox class="fl" v-model='checkArr' :label="trading.id" @change="changevalue"></el-checkbox>{{index + 1}}</td>
                  <td>{{trading.fiveteen}}</td>
                  <td>{{trading.two}}</td>
                  <td width="200">{{trading.three}}</td>
                  <td>{{trading.four}}</td>
                  <td>{{trading.five}}</td>
                  <td>{{trading.six}}</td>
                  <td>{{trading.eight}}</td>
                  <td>{{trading.nine}}</td>
                  <td>{{trading.ten}} </td>
                  <td>{{trading.eleven}}</td>
                  <td>{{trading.twelve}}</td>
                  <td>{{trading.thirteen}}</td>
                  <td>{{trading.fourteen}}</td>
                </tr>
              </table>
            </div>
            <div class="pageBotom">
              <div class="pageBotomLeft">
                <el-checkbox class="fl" v-model='cheackAllChecked' @change='checkAllFun'>全选</el-checkbox>
                <span class="reverseSelected" @click="reverseChecked">反选</span>
                <span class="deleteSelected">删除选中</span>
              </div>
              <div class="pageBotomRight">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 弹窗开始 -->
      <div class="system-menban" v-show="showSystemPopup"></div>
      <div class="systemPopup" v-show="showSystemPopup">
        <div class="topTitle">
          <span>{{systemPopupTitle}}</span>
          <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
        </div>
        <!-- 筛选弹窗 -->
        <div class="screeningPopup clear" v-show="showScreeningPopup">
          <ul class="clear">
            <li>
              <span class="spanTitle">修改日期</span>
              <div class="inputBox">
                <el-date-picker v-model="screeningValueList.changeDateValue" type="date" placeholder="修改日期">
                </el-date-picker>
              </div>
            </li>
            <li>
              <span class="spanTitle">药品状态</span>
              <div class="inputBox">
                <el-select v-model="screeningValueList.stateDrugValue">
                  <el-option v-for="item in screeningValueList.stateDrugOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </li>
            <li>
              <span class="spanTitle">上架日期</span>
              <div class="inputBox">
                <el-date-picker v-model="screeningValueList.upDateValue" type="date">
                </el-date-picker>
              </div>
            </li>
            <li>
              <span class="spanTitle">下架日期</span>
              <div class="inputBox">
                <el-date-picker v-model="screeningValueList.downDateValue" type="date">
                </el-date-picker>
              </div>
            </li>
            <li>
              <span class="spanTitle">药品类型</span>
              <div class="inputBox">
                <el-select v-model="screeningValueList.drugTypeValue">
                  <el-option v-for="item in screeningValueList.drugTypeOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </li>
            <li>
              <span class="spanTitle">药品类目</span>
              <div class="inputBox">
                <el-select v-model="screeningValueList.drugCategoryValue">
                  <el-option v-for="item in screeningValueList.drugCategoryOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </li>
            <li>
              <span class="spanTitle">品牌名称</span>
              <div class="inputBox">
                <input type="text" class="orgInput">
              </div>
            </li>
            <li>
              <span class="spanTitle">信息费比例</span>
              <div class="inputBox">
                <el-select v-model="screeningValueList.informationRateValue">
                  <el-option v-for="item in screeningValueList.informationRateOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </li>
            <li>
              <span class="spanTitle">关键词搜索</span>
              <div class="inputBox">
                <input type="text" class="orgInput">
              </div>
            </li>
            <li>
              <span class="spanTitle">库存范围</span>
              <div class="inputBox">
                <input type="text" class="orgInputSm"><span class="horizontalLine"></span><input type="text" class="orgInputSm">
              </div>
            </li>
          </ul>
          <div class="system-messagebox1-btn clear">
            <div>确定</div>
            <div @click="hideSystemPopup">取消</div>
          </div>
        </div>
        <!--/.screeningPopup -->
        <!-- 批量导出 -->
        <div class="patchExportPopup" v-show="showPatchExport">
          <div class="topText">请编辑您需要的数据<span>编辑后您导出的Excel表格会显示以下数据</span></div>
          <div class="patchExportCheckbox">
            <el-checkbox-group v-model="businessType">
              <el-checkbox label="中成药"></el-checkbox>
              <el-checkbox label="生化药品"></el-checkbox>
              <el-checkbox label="一类医疗器械"></el-checkbox>
              <el-checkbox label="体外诊断试剂"></el-checkbox>
              <el-checkbox label="中药饮片"></el-checkbox>
              <el-checkbox label="疫苗"></el-checkbox>
              <el-checkbox label="无证的二类医疗器械"></el-checkbox>
              <el-checkbox label="其它药品"></el-checkbox>
              <el-checkbox label="保健药品"></el-checkbox>
              <el-checkbox label="抗生素"></el-checkbox>
              <el-checkbox label="化学药制剂"></el-checkbox>
              <el-checkbox label="二类精神药品"></el-checkbox>
              <el-checkbox label="三类医疗器械"></el-checkbox>
              <el-checkbox label="其它药品"></el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="bottomText">导出格式Excel表格（.xls文件）</div>
          <div class="system-messagebox1-btn clear">
            <div @click="determineTheExport">确定导出</div>
            <div @click="hideSystemPopup">取消</div>
          </div>
        </div>
        <!--/.patchExportPopup -->
        <!-- 批量导出成功 -->
        <div class="okPopup" v-show="showExportOkPopup">
          <i class="iconfont icon-web-icon-"></i>
          <h3>导出成功</h3>
          <div class="system-messagebox1-btn clear">
            <div @click="hideSystemPopup">确定</div>
          </div>
        </div>
        <!-- /.exportOkPopup -->
      </div>
      <!-- 弹窗结束 -->
    </div>
  </div>
</template>

<script>
  import topBar from "../../public/top";
  import leftBar from "../../public/left";
  import homeBar from "../../public/homebar";
  export default {
    components: {
      leftBar,
      topBar,
      homeBar
    },
    data() {
      return {
        data: "drugManagment",
        currentPage: {
          path: "/expired",
          name: "药品管理"
        },
        showSystemPopup: false,
        showScreeningPopup: false,
        systemPopupTitle: "",
        input21: "",
        moreScreeningKeyword: false,
        //筛选内容
        screeningValueList: {
          changeDateValue: "", //修改日期
          upDateValue: "", //上架日期
          downDateValue: "", //下架日期
          drugTypeValue: "", //药品类型
          stateDrugValue: "", //药品状态
          informationRateValue: "", //信息费比例
          drugCategoryValue: "", //药品类目
          drugTypeOptions: [
            //药品类型
            {
              value: "选项1",
              label: "黄金糕"
            },
            {
              value: "选项2",
              label: "双皮奶"
            }
          ],
          stateDrugOptions: [
            //药品状态
            {
              value: "选项1",
              label: "黄金糕"
            },
            {
              value: "选项2",
              label: "双皮奶"
            }
          ],
          informationRateOptions: [
            //信息费比例
            {
              value: "选项1",
              label: "黄金糕"
            },
            {
              value: "选项2",
              label: "双皮奶"
            }
          ],
          drugCategoryOptions: [
            //药品类目
            {
              value: "选项1",
              label: "黄金糕"
            },
            {
              value: "选项2",
              label: "双皮奶"
            }
          ]
        },
        //筛选结果列表
        moreScreeningKeywordList: [{
            key: "修改日期",
            value: "2018/12/10中药"
          },
          {
            key: "药品类型",
            value: "中药中药中药中药"
          }
        ],
        moreScreeningKeyword: false, //（筛选关键字下拉框）开关
        iconDownSwitch: false, //（筛选关键字下拉按钮）开关
        tableList: [{
            id: "1",
            fiveteen: "4545254545454",
            two: "img",
            three: "药品>化学药品>抗生素类感染类>抗生素类感染类>抗生素类感染类",
            four: "10016010010",
            five: "感康感冒药",
            six: "云南白药",
            seven: "2018/4/12",
            eight: "乙类OTC",
            nine: "化学药品",
            ten: "150",
            eleven: "2018/1/2",
            twelve: "2018/1/20",
            thirteen: "2018/1/20",
            fourteen: "已过期"
          },
          {
            id: "2",
            fiveteen: "4545254545454",
            two: "img",
            three: "药品>化学药品>抗生素类感染类",
            four: "10016010010",
            five: "感康感冒药",
            six: "云南白药",
            seven: "2018/4/12",
            eight: "乙类OTC",
            nine: "化学药品",
            ten: "4564",
            eleven: "2018/1/2",
            twelve: "2018/1/20",
            thirteen: "2018/1/20",
            fourteen: "已过期"
          }
        ],
        cheackAllChecked: false,
        checkArr: [],
        checkCompleteArr: [],
        businessType: [],
        currentPage4: 1,
        showPatchExport: false, //（导出弹窗）开关
        showExportOkPopup: false, //（导出成功弹窗）开关
      };
    },
    mounted() {
      //全选或反选用到的完整数组值（5/5）
      var _this = this;
      this.tableList.forEach(function(item, index) {
        if (index >= 0) {
          _this.checkCompleteArr.push(item.id);
        }
      });
      //判断有没有筛选的关键词，有的话就显示下拉框
      if (this.moreScreeningKeywordList.length > 0) {
        this.iconDownSwitch = true;
      }
    },
    methods: {
      //显示批量导出弹窗
      clickPatchExport() {
        this.showSystemPopup = true;
        this.showPatchExport = true;
        this.systemPopupTitle = "批量导出";
      },
      //点击确定导出
      determineTheExport() {
        this.showExportOkPopup = true;
        this.showPatchExport = false;
        this.systemPopupTitle = "导出成功";
      },
      //显示筛选弹窗
      clickScreeningPopup() {
        this.showSystemPopup = true;
        this.showScreeningPopup = true;
        this.systemPopupTitle = "筛选条件";
      },
      hideSystemPopup() {
        //关闭弹窗
        this.showSystemPopup = false;
        this.showScreeningPopup = false;
        this.showPatchExport = false;
        this.showExportOkPopup = false;
        this.systemPopupTitle = "";
      },
      checkAllFun() {
        //实现全选（1/5）
        var _this = this;
        this.checkArr = [];
        if (this.cheackAllChecked) {
          this.tableList.forEach(function(item, index) {
            if (index >= 0) {
              _this.checkArr.push(item.id);
            }
          });
        }
      },
      reverseChecked() {
        //实现反选（2/5）
        var _this = this;
        var changeArr = [];
        this.tableList.forEach(function(item, index) {
          if (index >= 0) {
            changeArr.push(item.id);
          }
        });
        this.removeByValue(changeArr, this.checkArr);
      },
      removeByValue(changearr, checkarr) {
        //反选过滤函数（3/5）
        var _this = this;
        for (var j = 0; j < checkarr.length; j++) {
          for (var i = 0; i < changearr.length; i++) {
            if (changearr[i] === checkarr[j]) {
              changearr.splice(i, 1);
              break;
            }
          }
        }
        this.checkArr = changearr;
        if (changearr.length <= _this.checkCompleteArr.length) {
          this.cheackAllChecked = false;
        }
        if (changearr.length === _this.checkCompleteArr.length) {
          this.cheackAllChecked = true;
        }
      },
      changevalue() {
        //选项的change事件（4/5）
        var _this = this;
        if (this.checkArr.length <= _this.checkCompleteArr.length) {
          this.cheackAllChecked = false;
        }
        if (this.checkArr.length === _this.checkCompleteArr.length) {
          this.cheackAllChecked = true;
        }
      },
      //点击删除单个筛选关键词
      deleteScreeningKeywordItem(index) {
        this.moreScreeningKeywordList.splice(index, 1);
        if (this.moreScreeningKeywordList.length == 0) {
          this.moreScreeningKeyword = false;
          this.iconDownSwitch = false;
        }
      },
      //点击清空筛选条件
      clearScreeningConditions() {
        this.$confirm("此操作将删除所有筛选记录?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.moreScreeningKeywordList = [];
            this.moreScreeningKeyword = false;
            this.iconDownSwitch = false;
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      addPath(n1, n2) {
        //点击切换home-bar
        var obj = {};
        obj.n1 = n1;
        obj.n2 = n2;
        this.$store.commit("addPath", obj);
      }
    }
  };
</script>

<style lang="less">
  @import "../css/drugList.less";
</style>
